<script setup lang="ts">
  import { ref, useSlots, computed, onMounted, Slots } from 'vue'
  import { ElTabs, ElTabPane, vLoading } from 'element-plus'
  import { IconifyUtil, IconType, IconsType } from '@xtail/vue3'
  import { XIconSetOnlineSearchIconify } from '../XIconSetOnlineSearchIconify'
  import { XIconSetIconify } from '../XIconSetIconify'
  import { IconIconifyPickerPropsType } from './types'

  defineOptions({
    name: 'XIconIconifyPicker'
  })

  const props = withDefaults(defineProps<IconIconifyPickerPropsType>(), {
    iconSets: {} as any,
    onlineSearch: false,
    onlineSearchTabPaneProps: {} as any,
    onlineSearchIconSetProps: {} as any,
    iconSetIconifyProps: {} as any,
    tabsProps: {} as any,
    tabsClass: '',
    tabsStyle: '',
    tabPaneProps: {} as any,
    tabPaneClass: '',
    tabPaneStyle: ''
  })

  const value = defineModel<IconType>({ default: null })

  const slots: Slots = useSlots()

  const iconSetNames = computed(() => Object.keys(props.iconSets))
  const iconSetsLoaded = ref<Record<string, IconsType | false>>({})
  const isLoading = ref(false)
  const loadIconSets = async () => {
    if (isLoading.value) return
    isLoading.value = true
    iconSetsLoaded.value = {}
    for (const iconSetName of iconSetNames.value) {
      iconSetsLoaded.value[iconSetName] = await IconifyUtil.loadIcons(props.iconSets[iconSetName])
    }
    isLoading.value = false
  }
  onMounted(async () => await loadIconSets())

  const activeIconSetName = ref(iconSetNames.value[0])

  defineExpose({
    loadIconSets
  })
</script>

<template>
  <div v-loading="isLoading" class="x-icon-iconify-picker">
    <el-tabs
      v-bind="tabsProps"
      v-model="activeIconSetName"
      class="x-icon-iconify-picker__tabs"
      :class="tabsClass"
      :style="tabsStyle"
    >
      <template v-if="slots['tabs-add-icon']" #add-icon>
        <slot name="tabs-add-icon" />
      </template>
      <template #default>
        <el-tab-pane
          v-if="onlineSearch"
          v-bind="{
            ...tabPaneProps,
            ...onlineSearchTabPaneProps,
            label: onlineSearchTabPaneProps.label ?? '在线搜索',
            name: onlineSearchTabPaneProps.name ?? 'online-search'
          }"
          class="x-icon-iconify-picker__tabs__online-search"
          :class="tabPaneClass"
          :style="tabPaneStyle"
        >
          <template v-if="slots['online-search-tab-pane-label']" #label>
            <slot name="online-search-tab-pane-label" />
          </template>
          <template #default>
            <x-icon-set-online-search-iconify v-bind="onlineSearchIconSetProps" v-model="value">
              <template v-for="(_, name) in slots" :key="name" #[name]>
                <slot :name="name" />
              </template>
            </x-icon-set-online-search-iconify>
          </template>
        </el-tab-pane>
        <el-tab-pane
          v-for="(iconSet, name) in iconSetsLoaded"
          :key="name"
          v-bind="{
            ...tabPaneProps,
            label: name,
            name
          }"
          :class="tabPaneClass"
          :style="tabPaneStyle"
        >
          <template v-if="slots['tab-pane-label']" #label>
            <slot name="tab-pane-label" :icon-set-name="name" />
          </template>
          <template #default>
            <x-icon-set-iconify
              v-bind="{
                ...iconSetIconifyProps,
                resultProps: iconSet
                  ? undefined
                  : {
                      icon: 'error',
                      title: '图标集加载失败',
                      subTitle: '',
                      ...(iconSetIconifyProps.resultProps ?? {})
                    }
              }"
              v-model="value"
              :icons="iconSet ? iconSet : []"
            >
              <template v-for="(_, name) in slots" :key="name" #[name]>
                <slot :name="name" />
              </template>
            </x-icon-set-iconify>
          </template>
        </el-tab-pane>
        <slot name="tab-pane-affix" />
      </template>
    </el-tabs>
  </div>
</template>

<style lang="scss">
  @use './style' as *;
</style>
